<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>热点</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <link rel="stylesheet" href="../common/style/vars.css">
    <style>
      /* 滚动槽 */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      ::-webkit-scrollbar-track {
        border-radius: 3px;
        background: transparent;
        -webkit-box-shadow: inset 0 0 5px transparent;
      }
      /* 滚动条滑块 */
      ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: rgba(0,0,0,0.12);
        -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
      }

      :root{
        --bg-transparent: 1;
      }

      .view {
        width: 100%;
        height: 100%;
        /* background-color: rgba(255, 255, 255, var(--bg-transparent)); */
        position: relative;
      }

      .bg-img{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: var(--bg-color);
        opacity: var(--bg-transparent);
      }

      .list-box{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        color: var(--font-color);
      }


      .list-item {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
       
      }

      .list-item .bg{
        /* position: sticky; */
        /* top: 10px; */
        /* left: 0; */
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 65% 65%;
        opacity: 0.2;
      }

      ul{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding: 10px;
        font-size: 14px;
      }

      li{
        font-size: 14px;
        padding: 5px;
        width: 100%;
        display: flex;
        align-items: center;
      }

      li ~ li{
        border-top: 1px solid var(--border-line);
      }

      .list-item-left{
        flex: 1;
        display: flex;
        align-items: center;
      }

      .serial-number{
        margin-right: 10px;
        width: 20px;
      }

      .detail-content{
        flex: 1;
        word-break: break-all;        
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .list-item-right{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 10px;
        color: #f46267;
      }

      .list-item-right icon-svg{
        color: #f46267;
        margin-right: 10px;
      }

      .load-view icon-svg{
        animation-name: alternate;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }

      @keyframes alternate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      .switch-btn{
        position: fixed;
        right: 50px;
        bottom: 20px;
        font-size: 20px;
        font-weight: 700;
        cursor: pointer;
        border-radius: 50%;
        box-shadow: 0 0 10px var(--shadow-color);
        color: var(--font-color);
        z-index: 1;
        padding: 5px;
        background-color: var(--bg-color);
        opacity: var(--bg-transparent);
      }

      .refresh-btn{
        /* display: none; */
        position: fixed;
        right: 10px;
        bottom: 20px;
        padding: 5px;
        font-size: 20px;
        cursor: pointer;
        border-radius: 50%;
        box-shadow: 0 0 10px var(--shadow-color);
        color: var(--font-color);
        background-color: var(--bg-color);
        opacity: var(--bg-transparent);
        z-index: 1;
      }
  
      .err{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="view">
      <div class="bg-img"></div>
      <div class="list-box"></div>
      <div class="refresh-btn"  title="更新">
        <icon-svg name="refresh"></icon-svg>
      </div>
      <div class="switch-btn">
        <icon-svg name="backward"></icon-svg>
      </div>
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <script type="module" src="../common/js/move.js"></script>
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module">
    import { getList,getListApi } from "./browser/index.js";
    import { setInterval } from '../common/utils/utils.js'
    import IconSvg from "../components/IconSvg/IconSvg.js";
    customElements.define("icon-svg", IconSvg);


    let data = {
      list: [
        {name: '掘金',id: 'juejin'},
        {name: '抖音',id: 'douyin'},
        {name: '百度',id: 'baidu'}
      ],
      transparent: 100
    };
    let index = 0;
    let load1 = false, load2 = false;
    let dataList;

    window.getData = () => data;

    
    
    if (window.ipcRenderer) {
      window.ipcRenderer.on('init', (event, res) => {
        console.log(res);
        data = res || data;
        renderUl();
        document.documentElement.style.setProperty('--bg-transparent', res.transparent ? res.transparent / 100 : 1);
        getSelectList()
      });

      window.ipcRenderer.on("toParent", (event, res) => {
        if(res?.transparent || res.transparent === 0){
          document.documentElement.style.setProperty('--bg-transparent', res.transparent / 100);
          data.transparent = res.transparent;
        }else{
          data.list = res.data;
          renderUl();
          getSelectList()
        }

        if(window.sendSaveData){
          window.sendSaveData(data);
        }
      });
    }

    const viewEl = document.querySelector(".view");
    const switchBtnEl = document.querySelector(".switch-btn");
    const refreshBtnEl = document.querySelector(".refresh-btn");
    const listBoxEl = document.querySelector(".list-box");

    if(window.utools){
      let bool = window.utools.isDarkColors();
      if(bool){
        viewEl.classList.add('dark')
      }else{
        viewEl.classList.add('light')
      }
    }
    
    const renderUl = () => {
      listBoxEl.innerHTML = "";
      if(data.list.length > 1){
        switchBtnEl.style.display = "block";
      }else{
        switchBtnEl.style.display = "none";
      }
      data.list.forEach((item, index) => {
        let listItem = document.createElement("div");
        let bgEl = document.createElement("div");
        let ul = document.createElement("ul");
        listItem.className = `list-item ${item.id}`;
        bgEl.style.backgroundImage = `url(../components/IconSvg/${item.id}.svg)`;
        listItem.style.left = `${index * 100}%`;
        bgEl.className = "bg";
        listItem.appendChild(bgEl);
        listItem.appendChild(ul);
        listBoxEl.appendChild(listItem);
      });
    }
    
    renderUl()


    switchBtnEl.onclick = window.triggerHandle(() => {
      index++;
      if (index >= data.list.length) {
        index = 0;
      }
      let lists = document.querySelectorAll(".list-item");
      lists.forEach((item, i) => {
        let j = i - index;
        item.style.left = `${j * 100}%`;
      })
    })

    // 获取当前时间
    const getTime = () => {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      refreshBtnEl.title = `更新时间：${hour}:${minute}`;
      return `${year}-${month}-${day}${hour}:${minute}:${second}`;
    }


    const getSelectList = async () => {
      if(load1)load2 = true;
      load1 = true;
      refreshBtnEl.classList.add('load-view');
      let arr = [];
      let list = await getListApi(data.list);
      for (let i = 0; i < list.length; i++) {
        const element = list[i];
        renderListItem(element)
      }

      getTime();
      refreshBtnEl.classList.remove('load-view');
      load1 = false;
      load2 = false;
      dataList = arr;
      return arr;
    }


    const renderListItem = async (param) => {
      let ul = document.querySelector(`.${param.id} ul`);
      ul.innerHTML = "";
      if(param.list.length === 0){
        let err = document.createElement('div');
        err.className = 'err'
        err.innerText = '获取失败(请稍后再试)'
        ul.appendChild(err)
      }

      param.list.forEach((item)=>{
        let li = document.createElement("li");
        // ${parseInt(item.index) < 4  ? (item.hot?'<icon-svg name="hotspot"></icon-svg>':'') : ''}
        li.innerHTML= `
          <div class="list-item-left">
            <div class="serial-number">
              ${item.index}
            </div>
            <div class="detail-content">
              ${item.detail}
            </div>
          </div>
          <div class="list-item-right">
            ${item.hot?'<icon-svg name="hotspot"></icon-svg>':''}
            ${item.hot}
          </div>
        `;
        li.onclick = window.triggerHandle((e)=>{
          if(window.utools){
            utools.shellOpenExternal(item.url)
          }
        })
        
        ul.appendChild(li);
      })
    }

    refreshBtnEl.onclick = window.triggerHandle(async ()=>{
      if(load1 || load2){
        return;
      }
      getSelectList();
    })


    setInterval(getSelectList, 1000 * 60 * 60)

    

  </script>
</html>
